<template>
	<view class="container">
		<view class="withdraw_type" @click="changeType">
			<view class="withdraw_item">
				<view class="withdraw_text">提现至：</view>
				<image class="logo_img" :src="currentType.logo" mode="aspectFill"></image>
			</view>
			<view class="withdraw_item">
				<view class="withdraw_way">{{currentType.name}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		
		<view class="withdraw_account">
			<view class="">微信号：</view>
			<u-input
				fontSize="32rpx"
				clearable
				color="#000000"
				:customStyle="customStyle1"
				:placeholder="currentType.placeholder"
				type="text"
				placeholderClass="inputClass"
			/>
		</view>
		
		<view class="withdraw_main">
			<view class="withdraw_money_box">
				<view class="money">
					<text>可提现金额：</text>
					<text>3666</text>
					<text>元</text>
				</view>
				<view class="withdraw_num">
					<view class="pay_icon">￥</view>
					<u-input
						fontSize="48rpx"
						clearable
						type="digit"
						color="#000000"
						placeholderClass="inputClass"
						:customStyle="customStyle2"
						placeholder="请输入提现金额"
					/>
				</view>
			</view>
			
			<view class="withdraw_desc">
				<view class="service_charge">
					<view class="charge_item">
						<text class="charge_item_desc">提现手续费：</text>
						<text class="charge_item_num">1</text>
						<text class="charge_item_str">%</text>
					</view>
					<view class="charge_item">
						<text class="charge_item_num margin">1</text>
						<text class="charge_item_desc">元</text>
					</view>
				</view>
				<view class="service_time">
					<view class="">预计到账时间</view>
					<view class="">1-3工作日</view>
				</view>
			</view>
		</view>
		
		<u-popup
			:show="show"
			@close="close"
			:safeAreaInsetBottom="false"
			mode="bottom"
			round="10"
			:duration="300"
			:closeable="true"
			close-icon-color="#fff"
		>
			<view class="type_list_box">
				<view class="title">选择提现方式</view>
				<view class="type_item" v-for="(item, index) in withdrawType" :key="index" @click="selectItem(index)">
					<view class="type_main">
						<view class="type_logo">
							<image :src="item.logo" mode="aspectFill"></image>
						</view>
						<view class="type_name">
							<text>{{item.name}}</text>
							<text class="type_desc">{{item.desc}}</text>
						</view>
					</view>
					<view class="radio_box">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				templateConfig: uni.getStorageSync('templateConfig'),
				customStyle1: {
					border: 'none'
				},
				customStyle2: {
					border: 'none'
				},
				
				show: false,
				withdrawType: [
					{
						name: '微信',
						logo: '../../../static/images/distribution/wechatLogo.png',
						placeholder: '请输入微信手机号',
						desc: '输入微信手机号提现'
					},
					{
						name: '支付宝',
						logo: '../../../static/images/distribution/alipayLogo.png',
						placeholder: '请输入支付宝账号',
						desc: '输入支付宝账号提现'
					}
				],
				typeIndex: 0
			};
		},
		computed: {
			currentType () {
				return this.withdrawType[this.typeIndex];
			}
		},
		onLoad() {
			this.templateConfig= uni.getStorageSync('templateConfig')
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor:this.templateConfig.page.themeColor,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			});
		},
		methods: {
			changeType () {
				this.show = true;
			},
			close () {
				this.show = false;
			},
			selectItem (index) {
				this.typeIndex = index;
				setTimeout( () => {
					this.close();
				}, 100)
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		
		.withdraw_type{
			width: 100%;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.withdraw_item{
				display: flex;
				align-items: center;
				
				.withdraw_text{
					color: #2E2D2D;
					font-size: 28rpx;
				}
				
				.logo_img{
					width: 44rpx;
					height: 44rpx;
				}
				
				.withdraw_way{
					font-size: 24rpx;
					margin-right: 40rpx;
					font-weight: bold;
				}
			}
		}
		
		.withdraw_account{
			width: 100%;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			
			/deep/ .inputClass{
				font-size: 28rpx;
			}
			
			.withdraw_text{
				color: #2E2D2D;
				font-size: 28rpx;
			}
		}
		
		.withdraw_main{
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			
			.withdraw_money_box{
				width: 100%;
			
				.money{
					color: #2E2D2D;
					font-size: 28rpx;
				}
				
				.withdraw_num{
					display: flex;
					align-items: center;
					margin-top: 40rpx;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #F0F0F0;
					
					.pay_icon{
						font-size: 48rpx;
					}
					
					/deep/ .inputClass{
						font-size: 28rpx;
					}
				}
			}
			
			.withdraw_desc{
				
				.service_charge{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					padding: 20rpx 30rpx 20rpx 0;
					
					.charge_item{
						display: flex;
						align-items: center;
						
						.charge_item_desc{
							color: #2E2D2D;
							
						}
						.charge_item_num{
							color: #FF0000;
						}
						.charge_item_str{
							color: #706e6e;
						}
						.margin{
							margin-right: 14rpx;
						}
					}
				}
				.service_time{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #B1B4C3;
					font-size: 20rpx;
				}
			}
		}
		
		.type_list_box{
			width: 100%;
			padding: 60rpx 30rpx 150rpx 30rpx;
			box-sizing: border-box;
			
			.title{
				font-size: 34rpx;
				text-align: center;
				padding: 20rpx 0 30rpx 0;
			}
		
			.type_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 40rpx;
				
				.type_main{
					display: flex;
					align-items: center;
				}
				
				.radio_box{
					
				}
				.type_logo{
					
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.type_name{
					display: flex;
					flex-direction: column;
					margin-left: 30rpx;
					
					.type_desc{
						color: #747272;
						font-size: 24rpx;
					}
				}
			}
			.type_item:active{
				opacity: 0.5;
			}
		}
	}
</style>
